<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>爱车管家</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/guan.css" />
    <link rel="stylesheet" href="../assets/css/icon2.css"/>
    <style>
        .am-comment{padding: 5px 0;color: #666666}
        .products-list{border: none;}
        .products-list ul li{padding: 0}
        .products-list ul li a{display: block;height: 100%}
        .report p{height: 22px; line-height: 22px;}
        .am-btn{width: 90px; height: 35px;}
        .am-btn.am-radius{border-radius: 5px}
        .dit{position: relative}
        span.tip_num{
            color: #fff !important;
            display: block;
            background: #e4393c;
            width: 20px;
            height: 20px;
            position: absolute;
            border-radius: 12px;
            font-size: 10px;
            line-height: 20px;
            text-align: center;
        }
        span.tip_num_total{
            top: 30%;
            left: 30%;
        }
        .dit span.tip_num_1 {
            top: 8%;
            left: 29%;
        }
        .dit span.tip_num_2 {
            top: 8%;
            left: 87%;
        }
        .dit span.tip_num_3 {
            top: 60%;
            left: 66%;
        }
        .dit span.tip_num_4 {
            top: 70%;
            left: 19%;
        }
        .dit .cls{
            color: #fff;
            display: inline-block;
            width: 60px;
            height: 60px;
            position: absolute;
            border-radius: 32px;
            font-size: 10px;
            line-height: 20px;
            text-align: center;
        }
        .dit .cls-1{
            top: 7%;
            left: 17.5%;
        }
        .dit .cls-2{
            top: 7%;
            left: 76%;
        }
        .dit .cls-3{
            top: 60%;
            left: 56%;
        }
        .dit .cls-4{
            top: 69%;
            left: 8%;
        }
    </style>
</head>
<body style="background-color: #f7f9f9">
<div class="common-wrapper" style="border-bottom: 1px solid #dedfe0">
    <div class="head-img">
        <span class="my-img" style="background-image: url('../assets/i/default-btn.png')"></span>
        <p>粤B 7374F</p>
    </div>
</div>

<div class="products-list">
    <div class="am-comment" style="border-bottom: 1px solid #d2d2d2;">
        <span class="am-u-sm-6 font-size-sm">报告检测日期</span>
        <span class="am-u-sm-6 font-size-sm am-text-right">2015年5月12日</span>
    </div>

    <ul>
        <li>
            <a href="#">
            <span class="am-u-sm-10 report">选择其它车辆</span>
            <span class="am-u-sm-2 am-text-right"><i class="ui-fonts icon-chevron-right">&#xe601;</i></span>
            </a>
        </li>
    </ul>

    <ul style="margin-top: 10px; border-top: 1px solid #d2d2d2">
        <li style="height: 85px;padding: 10px 0">
            <a href="#">
                <span class="am-u-sm-8 report" style="padding-right: 0">
                    <p>里程：<span>380000公里</span></p>
                    <p>保险到期时间：<span>2015年3月21日</span></p>
                    <p>年审到期时间：<span>2015年3月21日</span></p>
                </span>
                <span class="am-u-sm-4" style="padding-top: 15px;padding-left: 0"><button type="button" class="am-btn am-btn-danger am-radius am-fr">预约服务</button></span>
            </a>
        </li>
    </ul>

    <ul style="margin-top: 10px; border-top: 1px solid #d2d2d2">
        <li>
            <a href="#">
                <span class="am-u-sm-10 report">检测报告<span class="tip_num tip_num_total">1</span></span>
                <span class="am-u-sm-2 am-text-right"><i class="ui-fonts icon-chevron-right">&#xe601;</i></span>
            </a>
        </li>
    </ul>
    <div class="dit">
        <img src="../assets/i/guan.png" style="margin: 15px 0" alt=""/>
        <!--
            cls-1 : 代表雨刮
            cls-2 : 代表轮胎
            cls-3 : 机油
            cls-4 : 车灯
         -->
        <a href="#"><span class="cls cls-1"></span></a>
        <a href="#"><span class="cls cls-2"></span></a>
        <a href="#"><span class="cls cls-3"></span></a>
        <a href="#"><span class="cls cls-4"></span></a>
        <span class="tip_num tip_num_1">1</span>
        <span class="tip_num tip_num_2">2</span>
        <span class="tip_num tip_num_3">3</span>
        <span class="tip_num tip_num_4">4</span>
    </div>
</div>

<div style="margin: 0 10px 10px">
    <button type="button" class="am-btn am-radius am-btn-danger am-btn-block" style="width:100%;height: 44px;">检测记录</button>
</div>

<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        var total = parseInt($('.tip_num_1').text()) + parseInt($('.tip_num_2').text()) + parseInt($('.tip_num_3').text()) + parseInt($('.tip_num_4').text());
        console.log(total);
        $('.tip_num_total').text(total);
    });
</script>
</body>
</html>